<template>
  <div class="songjianjie">
    <div class="back">
      <i class="iconfont icon-ffanhui-" @click="goback"></i>
      <div class="textpic">
        <span class="textpictop">{{infodetail.name}}</span>
        <span class="textpicbottom">{{infodetail.identities[0]}}</span>
      </div>
      <img :src="infodetail.cover" alt />
    </div>
    <h3>歌手简介</h3>
    <div class="jianjieinfo">
      <div class="introduce">{{Description}}</div>
      <div class="more" v-if="!isShowAll && isRoll" @click="toDown">
        完整歌手介绍
        <i class="iconfontunicode">&#xe66e;</i>
      </div>
      <div class="more" v-if="!isShowAll && !isRoll" @click="toUp">
        收起
        <i class="iconfontunicode">&#xe600;</i>
      </div>
    </div>
    <h3>热门单曲</h3>
    <div class="remendanqu">
      <ul>
        <li v-for="(item,id) in hotsongs" :key="item.id" @click="selectPlayList(item)">
          <div class="allitem">
            <div class="number">{{id+1}}</div>
            <div class="songssinger">
              <div class="songssingertop">{{item.name}}</div>
              <div class="songssingerbuttom">
                <span v-for="ar in item.ar" :key="ar.id">{{ar.name}}/</span>
                -{{item.al.name}}
              </div>
            </div>
            <div class="buttom">
              <i class="iconfontunicodetwo">&#xe60f;</i>
            </div>
          </div>
        </li>
      </ul>
      <div class="shijuecuojue"></div>
    </div>
    <div class="suspension">
      <div class="iconfonttubiao">
        <i class="iconfontunicodethree">&#xe611;</i>
        <i class="iconfontunicodethree">&#xe63e;</i>
        <i class="iconfontunicodethree">&#xe610;</i>
      </div>
      <img :src="bgpic" alt />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      Description: null,
      infodetail: {},
      // 歌单介绍是否显示完整
      isShowAll: true,
      // 歌单介绍是否是收起状态
      isRoll: true,
      hotsongs: [],
      bgpic: require("../../images/bgcolor.jpg")
    };
  },
  created() {
    this.getData();
    this.getSongDetail();
    console.log(this.$route.params.id);
  },
  methods: {
    getData() {
      axios
        .get("/api/artist/top/song", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          console.log(res.data);
          console.log(res.data.songs);
          this.hotsongs = res.data.songs;
        })
        .catch(err => {
          console.error(err);
        });
    },
    getSongDetail() {
      axios
        .get("/api/artist/detail", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          console.log(res.data);
          console.log(res.data.data.artist);
          this.infodetail = res.data.data.artist;
        })
        .catch(err => {
          console.error(err);
        });
    },
    // 点击按钮展开歌单介绍
    toDown() {
      this.Description = this.infodetail.briefDesc;
      this.isRoll = false;
    },
    // 点击按钮收起歌单介绍
    toUp() {
      this.Description = this.infodetail.briefDesc.slice(0, 100) + "...";
      this.isRoll = true;
    },
    goback() {
      this.$router.go(
        //go方法
        -1
      );
    },
    selectPlayList(item) {
      this.$store.commit("setSinger", item); //可以理解为是一个动作action,muation是同步服务
      const clickrankid = item.id; //这里的item后面的值是拉取数据里面的真实数据
      this.$router.push({
        //路由管理器必须要加r
        name: "ClickZuixinyinyue",
        //有多个参数时
        params: { id: clickrankid }
        //只有一个参数时
        // params:{playlistid},
      });
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
    }
  },
  watch: {
    "infodetail.briefDesc": function() {
      if (this.infodetail.briefDesc.length > 100) {
        this.Description = this.infodetail.briefDesc.substr(0, 100);
        this.isShowAll = false;
      } else {
        this.isShowAll = true;
      }
    }
  }
};
</script>

<style scoped>
.iconfont {
  color: green;
  position: absolute; /*绝对定位*/
  left: 5px;
  z-index: 200;
  font-size: 25px;
}
.back > img {
  width: 100%;
  height: 300px;
}
.jianjieinfo {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  /* border: 1px solid red; */
}
.jianjieinfo > .introduce {
  color: grey;
  line-height: 18px;
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: normal;
  word-wrap: break-word;
}
h3 {
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.textpic {
  position: absolute;
  top: 12rem;
  left: 2rem;
}
.textpic > span {
  display: block;
  text-align: left;
}
.textpictop {
  font-size: 20px;
  color: white;
}
.textpicbottom {
  width: 20px;
  position: absolute;
  top: 5rem;
  height: 15px;
  font-size: 8px;
  color: grey;
  border: 1px solid grey;
}
.more {
  position: absolute;
  top: 20rem;
  right: 0px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  color: grey;
}
.iconfontunicode {
  color: grey;
  font-size: 12px;
}
.iconfontunicodetwo {
  color: grey;
  font-size: 25px;
}
ul li {
  display: inline-block;
}
.allitem {
  width: 100%;
  height: 50px;
  /* border: 1px solid red; */
}
.number {
  float: left;
  /* border: 1px solid red; */
  height: 100%;
  width: 20px;
  font-size: 20px;
  color: grey;
  margin-right: 8px;
  padding-top: 10px;
  box-sizing: border-box;
}
.songssinger {
  float: left;
  /* border: 1px solid red; */
  height: 100%;
  width: 240px;
}
.buttom {
  float: right;
  /* border: 1px solid red; */
  height: 100%;
  width: 35px;
  padding-top: 10px;
  box-sizing: border-box;
}
.songssingertop {
  text-align: left;
  word-break: keep-all; /*不换行*/
  white-space: nowrap; /*不换行*/
  overflow: hidden; /*内容超出宽度时隐藏超出部分的内容*/
  text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
  margin-bottom: 8px;
}
.songssingerbuttom {
  text-align: left;
  font-size: 12px;
  color: grey;
  word-break: keep-all; /*不换行*/
  white-space: nowrap; /*不换行*/
  overflow: hidden; /*内容超出宽度时隐藏超出部分的内容*/
  text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
}
.remendanqu {
  width: 100%;
  height: 100px;
  /* overflow: hidden; */
}
.suspension {
  bottom: 0px;
  z-index: 99999;
  width: 100%;
  height: 60px;
  position: fixed;
  background-color: rgba(25, 25, 25, alpha);
}
.suspension > img {
  width: 100%;
  height: 100%;
}
.iconfontunicodethree {
  color: blue;
  font-size: 20px;
  margin-left: 20px;
}
.iconfonttubiao {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
}
.shijuecuojue {
  width: 100%;
  height: 70px;
}
</style>
